<template>
    <div class="zsListLook">
        <div class="header">
            <van-nav-bar :title="`${route?.query?.title || ''}`" left-arrow @click-left="handleLeft" />
        </div>
        <div class="zsListLook_top">
            <SelectionDetails title="选品详情" type="2" :datas="routeData" />
        </div>
        <div class="zsListLook_list">
            <ListLookCard type="4" v-for="item in listData" :key="item.id" :datas="item"
                @itemClick="routerGo(item.type, item.productId)" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getEnvValue } from "@/utils/index";
// api
import { selectRecruiterDetailed } from '@/api/operation/index'
// 组件
import SelectionDetails from '../components/selectionDetails/index.vue'
import ListLookCard from '../components/listLookCard/index.vue'

const route = useRoute()
const router = useRouter()

const routeData = ref<any>({})
const listData = ref<Array<any>>([])

const handleLeft = () => {
    router.back()
}
const GetList = async () => {
    const { rows = [] } = await selectRecruiterDetailed({ id: routeData?.value?.selectionId, recruiterDeptId: route?.query?.recruiterDeptId })
    rows.forEach(element => {
        if (element.productImage) {
            element.productImages = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
        }
    });
    listData.value = rows
}
// 跳转商品详情
const routerGo = (type: any, id: string) => {
    if (type == 1) {
        router.push({
            path: `/researchBasicsDetail/${id}`
        })
    } else {
        router.push({
            path: `/operationBasicsDetail/${id}`
        })
    }
}

onMounted(() => {
    const params: any = route?.query?.row || "{}"
    routeData.value = JSON.parse(params)
    GetList()
})
</script>

<style lang="less" scoped>
.zsListLook {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    background: #F6FAFF;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .zsListLook_top {
        padding: 10px 15px;
    }

    .zsListLook_list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
    }
}
</style>